<template>
    <div id='editor'>
        <P></P>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品名称</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-input v-model="detail.name"></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品描述</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-input v-model="detail.subtitle"></el-input>
            </el-col>
        </el-row>
        <!-- <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品状态</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-input value="已下架" v-if="detail.status==2"></el-input>
            </el-col>
        </el-row> -->
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>所属分类</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <!-- <el-input value="在售" v-if="detail.status==1"></el-input> -->
                <el-select v-model="value" placeholder="请选择一级分类">
                    <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品价格</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-input type="Number" v-model="detail.price">
                    <template slot="append">元</template>
                </el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品库存</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-input type="Number" v-model="detail.stock">
                    <template slot="append">件</template>
                </el-input>
            </el-col>
        </el-row>
        <el-row class="hcol">
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品图片</h4>
            </el-col>
            <el-col style="margin-left:115px;" :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                <p class="rep" v-for="(item,key) in img" :key="key"> <img
                        style=" margin-right:10px; width:100px; height:100px;" :src="detail.imageHost+item" alt="">
                    <i class="el-icon-close" @click="beforeRemove(item)"></i></p>
                <el-upload action="api/product/upload.do" :on-preview="handlePreview" name="upload_file"
                    :on-remove="handleRemove" multiple :on-exceed="handleExceed" list-type="null"
                    :on-success="upLoaded">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-col>
        </el-row>
        <br>
        <el-row class="drow">
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品详情</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
                <quill-editor style="margin-left:115px; margin-top:40px; width:400px; height:100px; background:white;"
                    list-type="picture-card" v-model="detail.detail">
                </quill-editor>
            </el-col>
        </el-row>
        <div class="footer"></div>
        <el-button style="margin-left:115px; background: #337ab7; color:white;" @click="update()">提交</el-button>
    </div>
</template>

<script>
    import {} from 'vuex'

    import Vue from 'vue'
    import {
        quillEditor
    } from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import {
        productEditor,
        productDetail,
        options
    } from '../../../api/index'
    import P from '../P.vue';
    import {
        Form,
        FormItem,
        Input,
        Row,
        Col,
        Button,
        Select,
        Option,
        Upload,
        MessageBox,
    } from 'element-ui'
    Vue.prototype.$confirm = MessageBox.confirm;
    export default {
        components: {
            P,
            'el-form': Form,
            'el-form-item': FormItem,
            'el-input': Input,
            'el-row': Row,
            'el-col': Col,
            'el-button': Button,
            'el-select': Select,
            'el-option': Option,
            'el-upload': Upload,
            quillEditor
        },
        data() {
            return {
                detail: {},
                id: Number,
                img: [],
                options: [],
                value: '',
                fileList: [], //图片
                imgArr: [], //上传的图片名
                str: '' //imgArr转换的字符串
            };
        },
        methods: {
            upLoaded(response, file, fileList) {
                console.log(response);
                this.imgArr.push(response.data.uri)
                this.str = this.imgArr.join(',')
                // this.detail.subImages = this.str
                // console.log(this.imgArr);
                this.img = this.imgArr
                // console.log(this.img);


            },
            handleRemove(file) {
                // console.log(file, fileList);
                var index = this.imgArr.findIndex(item => {
                    return item == file
                })
                this.imgArr.splice(index, 1)
                this.str = this.imgArr.join(',')
                // this.detail.subImages = this.str
                // console.log(this.str);

            },
            handlePreview(file) {},
            handleExceed(files, fileList) {
                this.$message.warning(
                    `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(item) {
                // return this.$confirm(`确定移除 ${ item }？`)
                if (confirm(`确定删除${item}？`)) {
                    var index = this.imgArr.findIndex(res => {
                        return res == item
                    })
                    // console.log(index);
                    this.imgArr.splice(index, 1)
                    this.str = this.imgArr.join(',')
                    this.img = this.imgArr
                    console.log(this.str);
                } else {

                }
            },
            update() {
                // console.log(1);
                var obj = {
                    id: this.id,
                    categoryId: this.detail.categoryId,
                    name: this.detail.name,
                    subtitle: this.detail.subtitle,
                    subImages: this.str,
                    detail: this.detail.detail,
                    price: this.detail.price,
                    stock: this.detail.stock,
                    status: this.detail.status
                }
                productEditor(obj)
                    .then(res => {
                        // console.log(res);

                        this.$message({
                            message: `${res.data.data}`,
                            type: 'success'
                        });
                        this.$router.push('/product/index')
                    })
            },
            async getdetail(id) {
                let {
                    data: res
                } = await productDetail({
                    productId: id
                })
                this.detail = res.data
                this.img = this.detail.subImages.split(',')
                this.imgArr = this.detail.subImages.split(',')
                // console.log(this.img);
                // console.log(this.imgArr);
            },
            async getopt() {
                let res = await options()
                this.options = res.data.data
                var index = this.options.filter(re => {
                    return re.id == this.detail.categoryId
                })
                this.imgArr.push()
                this.value = index[0].name
                // console.log(index);
            },
        },
        mounted() {
            this.getopt()
            const id = this.$route.query.id
            this.id = id
            this.getdetail(id)
        },
        computed: {}
    }
</script>
<style lang='scss'>
    #editor {

        // height: 90%;
        .footer {
            height: 200px;
        }

        .el-row {
            width: 100%;
            height: 50px;
        }

        .drow {
            display: flex;
            flex-direction: column;
        }

        .rep:hover {
            &>i {
                display: block;
            }
        }

        .rep {
            position: relative;

            &>i {
                position: absolute;
                top: 2px;
                right: 10px;
                color: white;
                display: none;
            }
        }

        .hcol {
            width: 100%;
            height: 170px;
            display: flex;
            flex-direction: column;

            .el-upload-list__item-name {
                display: none;
            }

            img {
                float: left;
            }

            ul {
                float: left;
                display: flex;
            }

            .el-upload--picture-card,
            .el-upload-list__item-status-label {
                float: left;
            }

            .el-col {
                // display: flex;
                // align-items: flex-start;

                h4 {
                    height: 0;
                }
            }

        }

        .el-col {
            height: 100%;
            display: flex;
            align-items: center;

        }
    }
</style>